<template>
  <view class="popular-services-example">
    <view class="example-header">
      <text class="example-title">PopularServices 组件使用示例</text>
      <text class="example-desc">基于设计稿实现的热门服务卡片组件</text>
    </view>

    <!-- 基础用法 -->
    <view class="example-section">
      <view class="section-title">
        <text class="title-text">基础用法</text>
      </view>
      <view class="section-content">
        <PopularServices @serviceClick="handleServiceClick" />
      </view>
    </view>

    <!-- 使用说明 -->
    <view class="example-section">
      <view class="section-title">
        <text class="title-text">使用说明</text>
      </view>
      <view class="usage-guide">
        <view class="guide-item">
          <text class="guide-label">1. 导入组件：</text>
          <view class="code-block">
            <text class="code-text">import PopularServices from '@/components/PopularServices.vue'</text>
          </view>
        </view>
        
        <view class="guide-item">
          <text class="guide-label">2. 在模板中使用：</text>
          <view class="code-block">
            <text class="code-text">&lt;PopularServices @serviceClick="handleServiceClick" /&gt;</text>
          </view>
        </view>
        
        <view class="guide-item">
          <text class="guide-label">3. 处理点击事件：</text>
          <view class="code-block">
            <text class="code-text">const handleServiceClick = (payload) => {</text>
            <text class="code-text">  console.log('点击了:', payload.name)</text>
            <text class="code-text">  // payload.type: 'medical' | 'mobility' | 'case' | 'maternal' | 'elderly'</text>
            <text class="code-text">}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 点击历史 -->
    <view class="example-section">
      <view class="section-title">
        <text class="title-text">点击历史</text>
      </view>
      <view class="click-history">
        <view 
          v-for="(item, index) in clickHistory" 
          :key="index" 
          class="history-item"
        >
          <text class="history-time">{{ item.time }}</text>
          <text class="history-service">{{ item.service }}</text>
          <text class="history-type">{{ item.type }}</text>
        </view>
        <view v-if="clickHistory.length === 0" class="no-history">
          <text class="no-history-text">暂无点击记录</text>
        </view>
      </view>
    </view>

    <!-- 组件特性 -->
    <view class="example-section">
      <view class="section-title">
        <text class="title-text">组件特性</text>
      </view>
      <view class="features-list">
        <view class="feature-item">
          <text class="feature-icon">🎨</text>
          <text class="feature-text">基于750rpx设计稿，完美还原视觉效果</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">📱</text>
          <text class="feature-text">响应式设计，支持小屏设备适配</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">⚡</text>
          <text class="feature-text">流畅的交互动画和点击反馈</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🔧</text>
          <text class="feature-text">TypeScript支持，完整的类型定义</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🎯</text>
          <text class="feature-text">事件驱动的组件设计，易于集成</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
/**
 * PopularServices组件使用示例
 * 展示组件的使用方法和特性
 * @author AI Assistant
 * @description 提供组件使用指南、代码示例和交互演示
 */

import { ref } from 'vue'
import PopularServices from './PopularServices.vue'

// 响应式数据
const clickHistory = ref<Array<{
  time: string
  service: string
  type: string
}>>([])

/**
 * 处理服务卡片点击事件
 * @param payload - 点击事件数据
 */
const handleServiceClick = (payload: { type: string; name: string }) => {
  const now = new Date()
  const timeStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
  
  // 添加到点击历史
  clickHistory.value.unshift({
    time: timeStr,
    service: payload.name,
    type: payload.type
  })
  
  // 限制历史记录数量
  if (clickHistory.value.length > 5) {
    clickHistory.value = clickHistory.value.slice(0, 5)
  }
  
  console.log('服务点击:', payload)
}
</script>

<style lang="scss" scoped>
.popular-services-example {
  padding: 32rpx;
  background: #f8f9fa;
  min-height: 100vh;
}

.example-header {
  text-align: center;
  margin-bottom: 48rpx;
  
  .example-title {
    display: block;
    font-size: 44rpx;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 16rpx;
  }
  
  .example-desc {
    font-size: 28rpx;
    color: #7f8c8d;
  }
}

.example-section {
  margin-bottom: 48rpx;
}

.section-title {
  margin-bottom: 24rpx;
  
  .title-text {
    font-size: 36rpx;
    font-weight: 600;
    color: #34495e;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx;
      height: 32rpx;
      background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
      border-radius: 4rpx;
    }
  }
}

.section-content {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.usage-guide {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.guide-item {
  margin-bottom: 32rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .guide-label {
    font-size: 28rpx;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 12rpx;
    display: block;
  }
}

.code-block {
  background: #2c3e50;
  border-radius: 12rpx;
  padding: 20rpx;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  
  .code-text {
    display: block;
    font-size: 24rpx;
    color: #ecf0f1;
    line-height: 1.6;
    margin-bottom: 8rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.click-history {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.history-item {
  display: flex;
  align-items: center;
  padding: 16rpx 20rpx;
  margin-bottom: 12rpx;
  background: rgba(52, 152, 219, 0.1);
  border-radius: 16rpx;
  border-left: 6rpx solid #3498db;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .history-time {
    font-size: 24rpx;
    color: #7f8c8d;
    margin-right: 20rpx;
    min-width: 120rpx;
  }
  
  .history-service {
    font-size: 28rpx;
    color: #2c3e50;
    font-weight: 500;
    flex: 1;
    margin-right: 20rpx;
  }
  
  .history-type {
    font-size: 24rpx;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    padding: 4rpx 12rpx;
    border-radius: 12rpx;
  }
}

.no-history {
  text-align: center;
  padding: 60rpx 20rpx;
  
  .no-history-text {
    font-size: 28rpx;
    color: #bdc3c7;
  }
}

.features-list {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.feature-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #ecf0f1;
  
  &:last-child {
    border-bottom: none;
  }
  
  .feature-icon {
    font-size: 32rpx;
    margin-right: 20rpx;
    min-width: 60rpx;
    text-align: center;
  }
  
  .feature-text {
    font-size: 28rpx;
    color: #2c3e50;
    line-height: 1.4;
  }
}

// 响应式适配
@media (max-width: 600rpx) {
  .popular-services-example {
    padding: 24rpx;
  }
  
  .example-header {
    margin-bottom: 32rpx;
    
    .example-title {
      font-size: 36rpx;
    }
    
    .example-desc {
      font-size: 24rpx;
    }
  }
  
  .section-content,
  .usage-guide,
  .click-history,
  .features-list {
    padding: 24rpx;
  }
}
</style>
